import { Component, OnInit } from '@angular/core';
import {Path} from "../../../../portal/admin/admin-breadcrumb/breadcrumb";
import {PageSubject} from "../../../../util/page-subject";
import {TableUtil} from "../../../../util/table-util";

declare var $;
declare var moment;
declare var echarts;


@Component({
  selector: 'app-wind-rose',
  templateUrl: './wind-rose.component.html',
  styleUrls: ['./wind-rose.component.css']
})
export class WindRoseComponent implements OnInit {
  config;table;
  constructor(
    private pageSubject : PageSubject,
    private tableUtil:TableUtil,
  ) { }

  ngOnInit() {
    this.initStyle();
    this.pushPage();
    this.initEvent();
    this.initTime();
  }




  //面包屑导航
  pushPage() {
    let path = new Path("总览", "");
    this.pageSubject.pushPage("年风玫瑰", "", path);
  }

initEvent(){
  var dataObj = [{
    "name":"一月",
    "angleAxisData":['N','', 'NE','', 'E','', 'SE','', 'S', '', 'SW','', 'W','','NW',''],
    "seriesData":[
      [3,8,12,14,18,16,19,16,14,8,6,3,7,3,8,6],
      [5,6,13,13,17,15,21,17,14,9,7,5,8,4,9,5],
      [4,4,11,16,16,16,20,16,15,8,5,5,6,3,8,4],
      [2,6,12,14,18,14,21,17,13,9,6,3,7,4,9,6],
      [4,5,13,15,16,15,19,16,14,8,5,5,6,3,7,4],
      [1 ,7,11,15,15,15,20,18,13,9,7,4,8,4,8,5]
    ],
    "legend":['优', '良', '轻度','中度','重度','严重'],
    "color":['#43ce17','#efdc31','#fa0','#ff401a','#d20040','#9c0a4e']
  },{
    "name":"二月",
    "angleAxisData":['N','', 'NE','', 'E','', 'SE','', 'S', '', 'SW','', 'W','','NW',''],
    "seriesData":[
      [5,12,23,25,10,8,7,6,7,4,4,8,12,15,18,19],
      [7,14,22,25,11,9,4,5,6,5,5,7,12,14,17,18],
      [6,16,27,24,9,8,6,5,7,4,3,7,12,16,17,18],
      [4,15,24,24,10,7,5,4,8,6,3,8,11,13,19,19],
      [6,13,26,26,11,8,6,6,9,5,4,7,11,14,17,19],
      [5,17,25,23,12,10,4,4,8,4,3,8,10,15,18,19]
    ],
    "legend":['优', '良', '轻度','中度','重度','严重'],
    "color":['#43ce17','#efdc31','#fa0','#ff401a','#d20040','#9c0a4e']
  },{
    "name":"三月",
    "angleAxisData":['N','', 'NE','', 'E','', 'SE','', 'S', '', 'SW','', 'W','','NW',''],
    "seriesData":[
      [5,9,13,15,13,9,7,6,7,4,4,8,5,8,0,5],
      [7,8,12,14,12,9,4,5,6,5,5,7,6,7,0,4],
      [6,9,12,15,13,8,6,5,7,4,3,7,5,7,3,5],
      [4,8,13,14,14,7,5,4,8,6,3,8,6,8,2,4],
      [6,9,12,14,14,8,6,5,9,5,4,7,5,7,3,5],
      [5,8,11,15,14,10,7,4,8,4,3,8,6,8,2,4]
    ],
    "legend":['优', '良', '轻度','中度','重度','严重'],
    "color":['#43ce17','#efdc31','#fa0','#ff401a','#d20040','#9c0a4e']
  },{
    "name":"四月",
    "angleAxisData":['N','', 'NE','', 'E','', 'SE','', 'S', '', 'SW','', 'W','','NW',''],
    "seriesData":[
      [3,4,6,9,13,18,20,23,15,14,14,8,6,15,8,9],
      [2,4,7,7,14,19,21,19,14,15,15,7,5,14,7,8],
      [4,6,7,9,13,18,18,15,14,14,13,7,6,16,7,8],
      [2,5,4,8,14,17,16,16,15,16,13,8,6,13,9,9],
      [3,5,6,8,13,18,15,15,14,15,14,7,5,14,7,9],
      [4,6,5,9,15,18,14,16,15,14,13,8,6,15,8,9]
    ],
    "legend":['优', '良', '轻度','中度','重度','严重'],
    "color":['#43ce17','#efdc31','#fa0','#ff401a','#d20040','#9c0a4e']
  },{
    "name":"五月",
    "angleAxisData":['N','', 'NE','', 'E','', 'SE','', 'S', '', 'SW','', 'W','','NW',''],
    "seriesData":[
      [5,2,3,5,10,18,17,6,7,4,4,8,12,5,8,0],
      [7,4,2,5,11,19,14,5,6,5,5,7,12,4,7,8],
      [6,6,7,4,9,18,16,5,7,4,3,7,12,6,1,8],
      [4,5,4,4,10,17,15,4,8,6,3,8,11,3,9,9],
      [6,3,6,6,11,18,16,6,9,5,4,7,11,4,7,6],
      [5,7,5,3,12,10,14,4,8,4,3,8,10,5,8,9]
    ],
    "legend":['优', '良', '轻度','中度','重度','严重'],
    "color":['#43ce17','#efdc31','#fa0','#ff401a','#d20040','#9c0a4e']
  },{
    "name":"六月",
    "angleAxisData":['N','', 'NE','', 'E','', 'SE','', 'S', '', 'SW','', 'W','','NW',''],
    "seriesData":[
      [5,2,3,5,10,8,7,6,7,14,4,8,12,15,8,9],
      [7,4,2,5,11,9,4,5,6,15,5,7,12,14,7,8],
      [6,6,7,4,9,8,6,5,7,14,3,7,12,16,7,8],
      [4,5,4,4,10,7,5,4,8,16,3,8,11,13,9,9],
      [6,3,6,6,11,8,6,6,9,15,4,7,11,14,7,9],
      [5,7,5,3,12,10,4,4,8,14,3,8,10,15,8,9]
    ],
    "legend":['优', '良', '轻度','中度','重度','严重'],
    "color":['#43ce17','#efdc31','#fa0','#ff401a','#d20040','#9c0a4e']
  },{
    "name":"七月",
    "angleAxisData":['N','', 'NE','', 'E','', 'SE','', 'S', '', 'SW','', 'W','','NW',''],
    "seriesData":[
      [3,6,8,5,0,8,7,6,7,4,4,8,12,15,18,19],
      [2,4,7,5,1,9,4,5,6,5,5,7,12,14,17,18],
      [4,6,7,4,3,8,6,5,7,4,3,7,12,16,17,18],
      [2,5,8,4,0,7,5,4,8,6,3,8,11,13,19,19],
      [4,3,6,6,1,8,6,6,9,5,4,7,11,14,17,19],
      [2,5,5,3,2,10,4,4,8,4,3,8,10,15,18,19]
    ],
    "legend":['优', '良', '轻度','中度','重度','严重'],
    "color":['#43ce17','#efdc31','#fa0','#ff401a','#d20040','#9c0a4e']
  },{
    "name":"八月",
    "angleAxisData":['N','', 'NE','', 'E','', 'SE','', 'S', '', 'SW','', 'W','','NW',''],
    "seriesData":[
      [5,12,3,5,10,8,7,6,7,4,4,18,12,5,8,9],
      [7,14,2,5,11,9,4,5,6,5,5,17,12,4,7,8],
      [6,16,7,4,9,8,6,5,7,4,3,17,12,6,7,8],
      [4,15,4,4,10,7,5,4,8,6,3,18,11,3,9,9],
      [6,13,6,6,11,8,6,6,9,5,4,17,11,4,7,9],
      [5,17,5,3,12,10,4,4,8,4,3,18,10,5,8,9]
    ],
    "legend":['优', '良', '轻度','中度','重度','严重'],
    "color":['#43ce17','#efdc31','#fa0','#ff401a','#d20040','#9c0a4e']
  },{
    "name":"九月",
    "angleAxisData":['N','', 'NE','', 'E','', 'SE','', 'S', '', 'SW','', 'W','','NW',''],
    "seriesData":[
      [5,2,3,5,0,8,7,6,7,14,4,8,12,5,8,3],
      [7,4,2,5,1,9,4,5,6,15,5,7,12,4,7,2],
      [6,6,7,4,2,8,6,5,7,14,3,7,12,6,7,3],
      [4,5,4,4,0,7,5,4,8,16,3,8,11,3,9,2],
      [6,3,6,6,1,8,6,6,9,15,4,7,11,4,7,3],
      [5,7,5,3,2,10,4,4,8,14,3,8,10,5,8,2]
    ],
    "legend":['优', '良', '轻度','中度','重度','严重'],
    "color":['#43ce17','#efdc31','#fa0','#ff401a','#d20040','#9c0a4e']
  },{
    "name":"十月",
    "angleAxisData":['N','', 'NE','', 'E','', 'SE','', 'S', '', 'SW','', 'W','','NW',''],
    "seriesData":[
      [5,2,3,5,10,8,7,6,7,4,4,8,22,5,4,2],
      [7,0,2,5,11,9,4,5,6,5,5,7,22,4,3,3],
      [6,1,7,4,9,8,6,5,7,4,3,7,22,6,2,2],
      [4,0,4,4,10,7,5,4,8,6,3,8,21,3,3,2],
      [6,1,6,6,11,8,6,6,9,5,4,7,21,4,4,1],
      [5,2,5,3,12,10,4,4,8,4,3,8,20,5,2,0]
    ],
    "legend":['优', '良', '轻度','中度','重度','严重'],
    "color":['#43ce17','#efdc31','#fa0','#ff401a','#d20040','#9c0a4e']
  },{
    "name":"十一月",
    "angleAxisData":['N','', 'NE','', 'E','', 'SE','', 'S', '', 'SW','', 'W','','NW',''],
    "seriesData":[
      [5,2,3,5,10,8,7,6,7,4,4,8,2,15,18,19],
      [7,4,2,5,11,9,4,5,6,5,5,7,2,14,17,18],
      [6,6,7,4,9,8,6,5,7,4,3,7,2,16,17,18],
      [4,5,4,4,0,7,5,4,8,6,3,8,1,13,19,19],
      [6,3,6,6,1,8,6,6,9,5,4,7,1,14,17,19],
      [5,7,5,3,2,10,4,4,8,4,3,8,10,15,18,19]
    ],
    "legend":['优', '良', '轻度','中度','重度','严重'],
    "color":['#43ce17','#efdc31','#fa0','#ff401a','#d20040','#9c0a4e']
  },{
    "name":"十二月",
    "angleAxisData":['N','', 'NE','', 'E','', 'SE','', 'S', '', 'SW','', 'W','','NW',''],
    "seriesData":[
      [5,2,3,5,0,8,7,6,7,4,4,8,12,15,18,13],
      [7,4,2,5,1,9,4,5,6,5,5,7,12,14,17,12],
      [6,6,7,4,9,8,6,5,7,4,3,7,12,16,17,11],
      [4,5,4,4,10,7,5,4,8,6,3,8,11,13,19,12],
      [6,3,6,6,1,8,6,6,9,5,4,7,11,14,17,13],
      [5,7,5,3,2,10,4,4,8,4,3,8,10,15,18,12]
    ],
    "legend":['优', '良', '轻度','中度','重度','严重'],
    "color":['#43ce17','#efdc31','#fa0','#ff401a','#d20040','#9c0a4e']
  }];
  this.echartData(dataObj);

  this.wind8();

}
initStyle(){
  $(".btn-default").click(function () {
    $(this).addClass('active').siblings(".btn-default").removeClass("active");
  })
  $(".user_btn_base").click(function () {
    $(".user_base").show();
    $(".user_user").hide();
  })
  $(".user_btn_user").click(function () {
    $(".user_base").hide();
    $(".user_user").show();
  })
  $(".user_wind8").click(function () {
    this.wind8();
  }.bind(this));
  $(".user_wind16").click(function () {
    this.wind16();
  }.bind(this));
};


//8风向自定义
  wind8(){
    var userDataObj8 = {
      "angleAxisData":['N', 'NE', 'E', 'SE', 'S', 'SW','W','NW'],
      "windDirection":["北风","东北风","东风","东南风","南风","西南风","西风","西北风"],
      "windSpeed":[2.77,2.54,2.68,3.45,3.98,2.77,2.54,2.68],
      "seriesData":[
        [5,12,23,25,10,8,7,6],
        [7,14,22,25,11,9,4,5],
        [6,16,27,24,9,8,6,5],
        [4,15,24,24,10,7,5,4],
        [6,13,26,26,11,8,6,6],
        [5,17,25,23,12,10,4,4]
      ],
      "legend":['优', '良', '轻度','中度','重度','严重'],
      "color":['#43ce17','#efdc31','#fa0','#ff401a','#d20040','#9c0a4e']
    };
    this.userEchartData(userDataObj8);
    var userTableDataObj8 = [];
    $.each(userDataObj8.windDirection,function (i,list) {
      var obj = {
        "windDirection":list,
        "windSpeed":userDataObj8.windSpeed[i],
        "you":userDataObj8.seriesData[0][i]+"次",
        "liang":userDataObj8.seriesData[1][i]+"次",
        "qing":userDataObj8.seriesData[2][i]+"次",
        "zhong":userDataObj8.seriesData[3][i]+"次",
        "zhongdu":userDataObj8.seriesData[4][i]+"次",
        "yan":userDataObj8.seriesData[5][i]+"次",
      }
      userTableDataObj8.push(obj);
    })
    this.tableContent(userTableDataObj8);
  }


//16风向自定义
  wind16(){
    var userDataObj16 = {
      "angleAxisData":['N','NNE', 'NE','ENE', 'E','ESE', 'SE','SSE', 'S', 'SSW', 'SW','WSW', 'W','WNW','NW','NNW'],
      "windDirection":["北风","北东北风","东北风","东东北风","东风","东东南风","东南风","南东南风","南风","南西南风","西南风","西西南风","西风","西西北风","西北风","北西北风"],
      "windSpeed":[2.77,2.54,2.68,3.45,3.98,2.77,2.54,2.68,3.45,3.98,2.77,2.54,2.68,3.45,3.98,5.01],
      "seriesData":[
        [5,12,23,25,10,8,7,6,7,4,4,8,12,15,18,19],
        [7,14,22,25,11,9,4,5,6,5,5,7,12,14,17,18],
        [6,16,27,24,9,8,6,5,7,4,3,7,12,16,17,18],
        [4,15,24,24,10,7,5,4,8,6,3,8,11,13,19,19],
        [6,13,26,26,11,8,6,6,9,5,4,7,11,14,17,19],
        [5,17,25,23,12,10,4,4,8,4,3,8,10,15,18,19]
      ],
      "legend":['优', '良', '轻度','中度','重度','严重'],
      "color":['#43ce17','#efdc31','#fa0','#ff401a','#d20040','#9c0a4e']
    };
    this.userEchartData(userDataObj16);
    var userTableDataObj16 = [];
    $.each(userDataObj16.windDirection,function (i,list) {
      var obj = {
        "windDirection":list,
        "windSpeed":userDataObj16.windSpeed[i],
        "you":userDataObj16.seriesData[0][i]+"次",
        "liang":userDataObj16.seriesData[1][i]+"次",
        "qing":userDataObj16.seriesData[2][i]+"次",
        "zhong":userDataObj16.seriesData[3][i]+"次",
        "zhongdu":userDataObj16.seriesData[4][i]+"次",
        "yan":userDataObj16.seriesData[5][i]+"次",
      }
      userTableDataObj16.push(obj);
    })
    this.tableContent(userTableDataObj16);
  }

//基础echarts
  echartData(data){
    $.each(data,function(j,data){
      $(".user_base").append('<div id="myChart'+j+'" style="width: 360px;height: 400px;float:left"></div>');
      var myChart = echarts.init(document.getElementById('myChart'+j));
      var option = {
        title:{
          text:data.name,
          x:"center"
        },
        tooltip: {
          trigger: 'axis',
        },
        color:data.color,
//				    angleAxis: {
//				        type: 'category',
//				        data: data.angleAxisData,
//				        z: 10
//				    },
        angleAxis: {
          type: 'category',
          data: data.angleAxisData,
          interval:2,
          z: 10,
          boundaryGap: false,
          splitLine: {
            show: true,
            interval : 2,
            //zlevel:50,
            lineStyle: {
              color: '#999',
              type: 'solid'
            }
          },
          axisLabel:{
            formatter:1,
            interval:2

          },
          axisTick:{
            interval:2

          }
        },
        radiusAxis: {
        },
        polar: {
        },
        series: [
        ],
        legend: {
          show: true,
          bottom:0,
          data: data.legend
        }
      };
      $.each(data.legend, function(i,list) {
        var obj = {
          type: 'bar',
          data: data.seriesData[i],
          coordinateSystem: 'polar',
          name: data.legend[i],
          stack: 'a'
        }
        option.series.push(obj);
      });
      myChart.setOption(option);

    })
  }
//自定义echarts
  userEchartData(data){
      var myChart = echarts.init(document.getElementById("user_echarts"));
      var option = {
        tooltip: {
          trigger: 'axis',
        },
        color:data.color,
//				    angleAxis: {
//				        type: 'category',
//				        data: data.angleAxisData,
//				        z: 10
//				    },
        angleAxis: {
          type: 'category',
          data: data.angleAxisData,
          interval:2,
          z: 10,
          boundaryGap: false,
          splitLine: {
            show: true,
            interval : 2,
            //zlevel:50,
            lineStyle: {
              color: '#999',
              type: 'solid'
            }
          },
          axisLabel:{
            formatter:1,
            interval:2

          },
          axisTick:{
            interval:2

          }
        },
        radiusAxis: {
        },
        polar: {
        },
        series: [
        ],
        legend: {
          show: true,
          bottom:0,
          data: data.legend
        }
      };
      $.each(data.legend, function(i,list) {
        var obj = {
          type: 'bar',
          data: data.seriesData[i],
          coordinateSystem: 'polar',
          name: data.legend[i],
          stack: 'a'
        }
        option.series.push(obj);
      });
      myChart.setOption(option);
  }

  //初始化时间插件
  initTime(){
    let timeData = moment().format("YYYY-MM-DD HH")+":00"
    this.config = {
      timePicker:true,
      timePickerIncrement:5,
      timePicker24Hour:true,
      parentEl:$(".wrapper"),
      locale:{
        format:"YYYY-MM-DD HH:00",
        separator: " 至 ",
        applyLabel : '确定',
        cancelLabel : '取消',
        fromLabel: '从',
        toLabel: '到',
        weekLabel: 'W',
        customRangeLabel: 'Custom Range',
        daysOfWeek:["日","一","二","三","四","五","六"],
        monthNames: ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],
        firstDay:1
      },
      startDate: moment().subtract(1,"h").format("YYYY-MM-DD HH")+":00",
      endDate: timeData,
      maxDate: timeData
    };
    $("#timer_picker").daterangepicker(this.config);
  }

  //表格
  tableContent(datas){
    $(".user-table-area").html('<table class="table table-striped" id="user_table"></table>');
    this.table=this.tableUtil.load("user_table",{
      columns: [
        {
          field: 'windDirection',
          title: '风向',
          valign:"middle",
          halign:"center",
          width:50
        }, {
          field: 'windSpeed',
          title: '风速（级）',
          valign:"middle",
          halign:"center",
          width:50
        }, {
          field: 'you',
          title: '优',
          width:50,
          valign:"middle",
          halign:"center",
        }, {
          field: 'liang',
          title: '良',
          width:50,
          valign:"middle",
          halign:"center",
        }, {
          field: 'qing',
          title: '轻度',
          width:50,
          valign:"middle",
          halign:"center",
        },{
          field: 'zhong',
          title: '中度',
          width:50,
          valign:"middle",
          halign:"center",
        },{
          field: 'zhongdu',
          title: '重度',
          width:50,
          valign:"middle",
          halign:"center",
        },{
          field: 'yan',
          title: '严重',
          width:50,
          valign:"middle",
          halign:"center",
        }
      ],
      data:datas,
      pagination :true,
      paginationLoop: false,
      striped :true,
      paginationPreText : "上一页",
      paginationNextText :"下一页",
      undefinedText : " ",
      height:$(window.innerHeight)[0]-280,
      pageSize:15,
      pageList :[10,15,20]
    });
  };


}
